<template>
  <van-row class="doorImgCon" type="flex">
    <van-col class="doorImgFlexItem">
      <img
        class="doorImg"
        :style="{ width: collapse ? '45vw' : '90vw' }"
        :src="img1"
      />
    </van-col>
    <van-col>
      <div style="width: 10vw">
        <van-icon name="arrow-left" @click="collapseClick" />
      </div>
    </van-col>
    <van-col class="doorImgFlexItem">
      <img
        class="doorImg"
        :style="{ width: collapse ? '45vw' : '90vw' }"
        :src="img1"
      />
    </van-col>
  </van-row>
</template>

<script>
import { Swipe, SwipeItem, Icon, Row, Col } from "vant";
import img1 from "@/assets/wx/F8横版宣传图.jpg";
export default {
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Icon.name]: Icon,
    [Row.name]: Row,
    [Col.name]: Col,
  },
  data() {
    return {
      img1,
      collapse: false,
    };
  },
  methods: {
    collapseClick() {
      this.collapse = !this.collapse;
    },
  },
};
</script>

<style lang="scss">
.doorImgCon {
  overflow: hidden;
  width: 100vw;
  .doorImg {
    transition: width 0.5s;
    display: block;
  }
}
</style>